<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<style>
  #topDiv {
    text-align: center;
    padding-top: 70px;
    padding-right: 800px;
    width: 100%;
    height: 200px;
    background-color: #c5c3ff;
  }

  .content {
    padding-left: 100px;
    padding-top: 10px;
    font-size: 20px
  }

  .deleteStype {
    margin-left: 90%;
  }
</style>
<body>
<div id="topDiv">
  <h1 id="topH1">请发表你对Vue的评论</h1>
</div>
<div class="container">
  <div class="row">
    <!--用户评论区域-->
    <div class="col">
      <form style="padding-top: 50px;padding-left: 50px">
        <div class="form-group">
          <label for="username">用户名:</label>
          <input type="text" class="form-control" id="username" placeholder="请输入用户名...">
        </div>
        <div class="form-group">
          <label for="commentContent">评论内容:</label>
          <input type="text" class="form-control" id="commentContent" placeholder="请输入评论内容...">
        </div>
        <button type="submit" class="btn btn-primary">发表评论</button>
      </form>
    </div>
    <!--显示用户评论区域-->
    <div class="col">
      <h2>评论回复</h2>
      <ul class="list-group">
        <li class="list-group-item">First item
          <span>说：</span>
          <p class="content">删除</p>
          <button type="button" class="btn btn-danger deleteStype">删除</button>
        </li>

        <li class="list-group-item">Second item
          <span>说：</span>
          <p class="content">删除</p>
          <button type="button" class="btn btn-danger deleteStype">删除</button>
        </li>
        <li class="list-group-item">Third item
          <span>说：</span>
          <p class="content">删除</p>
          <button type="button" class="btn btn-danger deleteStype">删除</button>
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>
